<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@page import="java.util.*" %>
<%
 
   
    String type="spline";
 
    
    if(request.getParameter("type")!=null && !request.getParameter("type").equals(""))
    {
		     type = request.getParameter("type");
	  }
 
	  
	  String order="sp";
 
    if(request.getParameter("order")!=null && !request.getParameter("order").equals(""))
    {
		     order = request.getParameter("order");
	  }
	  
	  Calendar calendar = Calendar.getInstance();     
    
      int year= calendar.get(Calendar.YEAR);  
	 
	  String title="徽诚网订单总量统计",subtitle = year+"年订单统计数量";
	  
	  String url ="one_year_counts.jsp?data=";
	  
	  String categories ="['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月','十二月']";	  
	  
	  if(order.equals("co"))
    {
		     title="徽诚网订单状态统计";
		     
		     subtitle = year+"年订单状态统计";
 
		     
		     url = "order_state_counts.jsp?data=";
	  
     
	      categories ="['待付款', '已付款', '已发货', '交易成功', '无效', '退货中','待付款和待发货']";	    
	  
	  }
 
 

%>
<html>
  <head>
    <title>团购订单统计</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
	  <link href="/program/admin/index/css/style.css" rel="stylesheet" type="text/css">
 
   <link href="images/style.css" rel="stylesheet" type="text/css"/>
  	<script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/highcharts.js"></script>
    <script type="text/javascript">
		
			  var chart;
			 	$(document).ready(function(){
 
			 	 $('#container').html('<img src=/program/admin/images/wait.gif />正在加载，请稍后...');	
			  // define the options
			  var options = {
				chart: {
					renderTo: 'container',
					defaultSeriesType: '<%=type%>'
				},
				title: {
					text: '<%=title%>'
				},
				subtitle: {
					text: '<%=subtitle%>'
				},
				xAxis: {
					categories: <%=categories%>
				},
				yAxis: {
					min: 0,
					title: {
						text: '下单数量'
					}
				},
				legend: {
					enabled: false
				},
				tooltip: {
					formatter: function() {
			                return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': '+ this.y +'个';
					}
				},
				plotOptions: {
					spline: {
						cursor: 'pointer',
						point: {
							events: {
								click: function() {
									hs.htmlExpand(null, {
										pageOrigin: {
											x: this.pageX, 
											y: this.pageY
										},
										headingText: this.series.name,
										maincontentText: 'this.category: '+ this.category +
											'<br/>this.y: '+ this.y,
										width: 200
									});
								}
							}
						}
					}
				},
				series: []
			}
		  var data = Math.round(Math.random()* 10000); 
			jQuery.getJSON('<%=url%>'+data, null, function(data) {
				options.series.push({
					name: '订单数量',
					data: data
				});
				
				chart = new Highcharts.Chart(options);
			});
			
		});
 
		
	  function load_excel(){
		    document.getElementById("proDiv").style.display = 'inline';
		    document.getElementById("proDiv").innerHTML='<img src=/program/admin/images/wait.gif border=0 />正在导出，请稍等............';
			  //alert('type=<%=order%>'); 
			  $.ajax({
					   type: 'POST',
					   url: 'ajaxCreate.jsp',
					   data: 'type=<%=order%>',
					   success: function(msg){
					     document.getElementById('proDiv').innerHTML = msg;
					   }
					}); 
         }

				
		</script>

</head>

<body>
	<table width="100%" cellpadding="0" cellspacing="0" border="0">
		<tr>
			  <td width="90%">
				  <h1>团购订单统计</h1>
			  </td>
			<td>
				
			</td>
		</tr>
	</table>
	
	<table width="100%" cellpadding="0" cellspacing="0" class="dl_su">
		<tr>
		
		<td align="center" colspan="2">
			
				<input name="searchInfo" id="button1" type="button" value="订单总量统计" class="<%if(order.equals("sp")) out.print("buttoncss"); else out.print("buttoncss2");%>" onclick="window.location.href='index.jsp?order=sp'" />
		  	<span style="margin-left:20px"></span>

				<input name="searchInfo" id="button2" type="button" value="订单状态统计" class="<%if(order.equals("co")) out.print("buttoncss"); else out.print("buttoncss2");%>" onclick="window.location.href='index.jsp?order=co'" />
      
  
        <a href="javascript:load_excel();"><font color="#3E576F">导出excel</font></a>       
        <div id="proDiv" style="display: none;"></div>
  
       <hr/>
			
			
		</td>

		
		
		</tr>
		
		<tr>
			<td align="left" width="10%">
				
				<input type="button" name="delInfo" onclick="window.location.href='index.jsp?order=<%=order%>&type=spline'" value="折线图" class="buttab"/>
				<div style="margin-top:20px">
</div>
	
				<input type="button" name="delInfo" onclick="window.location.href='index.jsp?order=<%=order%>&type=column';" value="柱状图" class="buttab"/>
			
			</td>
			
			<td align="center">
			
				<div id="container" style="width: 700px; height: 320px; margin: 0 auto;text-align:center;"></div>
			
			</td>
		
		</tr>
	</table>
	
	<table width="100%" cellpadding="0" cellspacing="0" border="0" class="dl_bg">
		<tr>
			
		</tr>
	</table>
	
</body>

</html>
